Skip to main content

Aspects Overview

What Are Aspects?

Aspects are JavaScript files that Candescent dynamically injects into the Digital Banking platform at runtime. They allow partners and FIs to customize the user experience by manipulating the page's DOM — adding widgets, modifying elements, or integrating third-party services directly within the banking interface.

Aspects are supported on both web and mobile, but the execution model differs significantly between platforms.

Web vs. Mobile

ConcernWebMobile
How Aspects runInjected directly into the DOMRendered inside a native WebView
Interaction levelFull DOM access and manipulationOverlay only
Delivery formatPlain .js fileFull .html document loaded into a WebView
Script loadingdbk.loadScript(url) (platform utility)document.createElement('script') (manual)
Authenticationfetch() with session cookies using OIDCNative bridge (tokenApiDetails) → apiToken:ready event
Layout managementCSS onlysizeAndLocation bridge to negotiate with native app
Widget state trackingNot neededMutationObservercondenseWindow / expandWindow
Native bridge APIsNot usediOS: window.webkit.messageHandlers, Android: JSBridge

For the full implementation details for each platform, see the technical references:


Aspect Categories

Aspects fall into two categories based on whether they need to know who the logged-in user is.

1. Context-less Aspects

A context-less Aspect runs independently of the user's identity or session. It does not need any user-specific information.

Use cases:

  • Injecting promotional banners or announcements
  • Adding anonymous chat widgets
  • Web Only: Modifying HTML/DOM elements (styling, tooltips, layout adjustments)

Simple example:

alert('Hello World!');

2. Context-aware Aspects

A context-aware Aspect operates using the logged-in user's information. This is necessary for integrations like personalized chat, user-specific widgets, or services that need to verify identity.

How you obtain user context depends on the platform:

PlatformMethodsDetails
WebGlobal Variables, OIDC Authorization CodeSee below
MobileGlobal Variables (GUID only), OIDC via Native BridgeSee below and Mobile Technical Reference

Global Variables

After a user logs in, the platform stores basic user information in browser-accessible global variables. Your Aspect can read these using dbk.sessionInfo().

FieldMethodWebMobile
User GUIDdbk.sessionInfo().userGuidAvailableAvailable
Full Namedbk.sessionInfo().userFullNameAvailableNot available
const guid = dbk.sessionInfo().userGuid;
const name = dbk.sessionInfo().userFullName; // web only
warning

Global variable data is automatically cleared on logout. Because this data is accessible to any script in the DOM, use it only for cross-validation or display purposes — never as the sole source of trust for sensitive operations.

OIDC Authorization Code

For integrations that require verified, secure user identity, use the OIDC approach. The Aspect requests an authorization code from the platform, then your backend exchanges it for a token containing user claims. Both platforms support OIDC, but the mechanism differs:

PlatformHow OIDC Works
WebThe Aspect calls the OIDC token endpoint directly using fetch() with session cookies
MobileThe Aspect delegates the OIDC token endpoint call to the native app via the tokenApiDetails bridge, since session cookies are not available in the WebView

How to Choose

Web

QuestionContext-lessContext-aware (Global Var)Context-aware (OIDC)
Does the script need user identity?NoYesYes
Is security-sensitive identity verification required?NoNoYes
Does the script call a backend API?OptionalOptionalYes
ComplexityLowLowMedium

Mobile

QuestionContext-lessContext-aware (Native Bridge)
Does the script need user identity?NoYes
Does the script call a backend API?OptionalYes
ComplexityLowMedium

What FIs Need to Provide

To enable an Aspect, the FI provides:

  • The JavaScript file (or URL to it) with vendor-specific configuration
  • The category (context-less or context-aware) and method (global variable or OIDC)
  • The target platform (web, mobile, or both)

Next Steps